<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/html">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>Tiny Dashboard - A Bootstrap Dashboard Template</title>
    <!-- Simple bar CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/simplebar.css}">
    <!-- Fonts CSS -->
    <!--    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">-->
    <!-- Icons CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/feather.css}">
    <!-- Date Range Picker CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/daterangepicker.css}">
    <!-- App CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/app-light.css}" id="lightTheme">
    <link rel="stylesheet" th:href="@{/dash/css/app-dark.css}" id="darkTheme" disabled>
  </head>
  <body class="vertical  light  ">
    <div class="wrapper">
      <nav class="topnav navbar navbar-light" th:replace="~{comm/blank::topnav}"/>
      <aside th:replace="~{comm/blank::aside}"/>
      <main role="main" class="main-content">
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-12 col-lg-10 col-xl-8">
              <div class="row align-items-center mb-4">
                <div class="col">
                  <h2 class="h5 page-title"><small class="text-muted text-uppercase">小票</small><br />[[${indentId}]]</h2>
                </div>
                <div class="col-auto">
                  <a type="button" class="btn btn-primary" href="/dashboard/pick">继续</a>
                </div>
              </div>
              <div class="card shadow">
                <div class="card-body p-5">
                  <div class="row mb-5">
                    <div class="col-12 text-center mb-4">
                      <img th:src="@{/dash/assets/images/logo.svg}" class="navbar-brand-img brand-sm mx-auto mb-4" alt="...">
                      <h2 class="mb-0 text-uppercase">小票</h2>
                      <p class="text-muted"> [[${indentId}]]<br /><th:block th:if="${items!=null}">
                        [[${#temporals.format(items.get(0).createTime,'yyyy-MM-dd HH:mm:ss')}]]
                      </th:block></p>
                    </div>
                    <div class="col-md-7">
                      <p class="small text-muted text-uppercase mb-2">收银员</p>
                      <p class="mb-4">
                        <th:block th:if="${items!=null}">
                          <strong th:text="${items.get(0).userId}"></strong>
                        </th:block>
                      </p>
                      <p>
                        <span class="small text-muted text-uppercase">流水号 #</span><br />
                        <strong>[[${indentId}]]</strong>
                      </p>
                    </div>
                    <div class="col-md-5">
                      <p class="small text-muted text-uppercase mb-2">顾客</p>
                      <p class="mb-4">
                        <strong>顾客1</strong>
                      </p>
                      <p>
                        <small class="small text-muted text-uppercase">时间</small><br />
                        <th:block th:if="${items!=null}">
                          <strong th:text="${#temporals.format(items.get(0).createTime,'yyyy-MM-dd HH:mm:ss')}"></strong>
                        </th:block>
                      </p>
                    </div>
                  </div> <!-- /.row -->
                  <table class="table table-borderless table-striped">
                    <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">商品</th>
                        <th scope="col" class="text-right">单价</th>
                        <th scope="col" class="text-right">会员价</th>
                        <th scope="col" class="text-right">数量</th>
                        <th scope="col" class="text-right">总价</th>
                      </tr>
                    </thead>
                    <tbody>
                    <th:block th:if="${items!=null}" th:each="item,idx:${items}">
                      <tr>
                        <th scope="row" th:text="${idx.index}">1</th>
                        <td><strong>[[${item.itemName}]]</strong><br />
                        </td>
                        <td class="iItemType" th:value="${item.getItemType()}" hidden="hidden"></td>
                        <td class="text-right" th:text="${item.priceSell}">$15.00</td>
                        <td id="INpriceSell" class="text-right" th:text="${item.getItemType()==2?item.priceSell*0.9:item.priceSell}">$15.00</td>
                        <td class="count"  th:text="${item.count}">2</td>
                        <td class="text-right" th:text="${(item.getItemType()==2&&tag=='Yes')?(0.9*item.count.floatValue()*item.priceSell).floatValue():item.count.floatValue()*item.priceSell.floatValue()}">$30.00</td>
                      </tr>
                    </th:block>
<!--                      <tr>-->
<!--                        <th scope="row">2</th>-->
<!--                        <td> Front-End Development<br />-->
<!--                          <span class="small text-muted">Markup conversion and adding JavaScript</span>-->
<!--                        </td>-->
<!--                        <td class="text-right">$20.00</td>-->
<!--                        <td class="text-right">5</td>-->
<!--                        <td class="text-right">$100.00</td>-->
<!--                      </tr>-->
<!--                      <tr>-->
<!--                        <th scope="row">2</th>-->
<!--                        <td> Back-End Development<br />-->
<!--                          <span class="small text-muted">Database intergration with model functions</span>-->
<!--                        </td>-->
<!--                        <td class="text-right">$25.00</td>-->
<!--                        <td class="text-right">7</td>-->
<!--                        <td class="text-right">$155.00</td>-->
<!--                      </tr>-->
                    </tbody>
                  </table>
                  <div class="row mt-5">
                    <div class="col-2 text-center">
                      <img th:src="@{/dash/assets/images/qrcode.svg}" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
                    </div>
                    <div class="col-md-5">
                      <p class="text-muted small">
                        <strong>提示 : 请妥善保管好您的小票! </strong></p>
                    </div>
                    <div class="col-md-5">
                      <div class="text-right mr-2">
                        <p class="mb-2 h6">
                          <span class="text-muted">原价 : </span>
                          <span id="normalPrice">[[${normalPrice}]]</span>
                        </p>
                        <th:block th:if="${tag=='Yes'}">
                          <p class="mb-2 h6">
                            <span class="text-muted">会员价 : </span>
                            <span id="memPL">[[${memberPrice}]]</span>
                          </p>
                        </th:block>
                      </div>
                    </div>
                  </div> <!-- /.row -->
                </div> <!-- /.card-body -->
              </div> <!-- /.card -->
            </div> <!-- /.col-12 -->
          </div> <!-- .row -->
        </div> <!-- .container-fluid -->
        <div th:replace="~{comm/blank::modal1}"/>
        <div th:replace="~{comm/blank::modal2}"/>
      </main> <!-- main -->
    </div> <!-- .wrapper -->
    <script th:src="@{/dash/js/jquery.min.js}"></script>
    <script th:src="@{/dash/js/popper.min.js}"></script>
    <script th:src="@{/dash/js/moment.min.js}"></script>
    <script th:src="@{/dash/js/bootstrap.min.js}"></script>
    <script th:src="@{/dash/js/simplebar.min.js}"></script>
    <script th:src="@{/dash/js/daterangepicker.js}"></script>
    <script th:src="@{/dash/js/jquery.stickOnScroll.js}"></script>
    <script th:src="@{/dash/js/tinycolor-min.js}"></script>
    <script th:src="@{/dash/js/config.js}"></script>
    <script th:src="@{/dash/js/apps.js}"></script>
    <script th:src="@{/js/handle/checkout.js}"></script>
  </body>
</html>
